<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .parent {
    width: 180px;
    border: 3px solid #333;
    text-align: center;
    background: #56ec95;
    line-height: 40px;
  }
  .child {
    width: 220px;
    height: 180px;
    text-align: center;
    box-shadow: 2px -2px 0px #333;
    border: 1px solid #333;
    background: #ffd588;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
<body>
  <h3 style="color: #333;">普通盒外小里大的表现方式</h3>
  <hr style="border-width: 0px; border-bottom: 1px solid #ccc;"/>

  <div class="parent">
    父盒子
    <div class="child">子盒子</div>
  </div>
</body>
<!-- 
  问题：【外小里大】, 父盒子宽度180, 子盒子宽度220, 会如何展示?
  答案：子盒子会溢出,
 -->
</html>
